<template>
    <div id="header">
        <div class="left">
            <i class='iconfont metro-dingwei' style="color:#eb9a02;"></i>
            <span>武汉市</span>
            <span>{{ date }}</span>
            <span>{{ week }}</span>
            <span>{{ time }}</span>
        </div>
        <div class="title">地铁三维可视化管控平台</div>
        <div class="right">
            <i :class="['iconfont',weatherIcon,'icon']"></i>
            <!-- <span class='iconfont icon-qingtian' ></span> -->
            <span>{{ weather }}</span>
            <span>{{ temperature }}℃</span>
        </div>
    </div>
</template>

<script setup>
import dayjs from 'dayjs'
import { ref,onMounted ,onUnmounted} from 'vue'
import { getWeatherHttp } from '@/api/WeatherURL';
import { computed } from 'vue';

//日期设定
const date = ref(dayjs().format('YYYY-MM-DD'))
const week = ref(dayjs().format('dddd'))
const time = ref(dayjs().format('HH:mm:ss'))

const weekArr = {
    'Monday':'星期一',
    'Tuesday':'星期二',
    'Wednesday':'星期三',
    'Thursday':'星期四',
    'Friday':'星期五',
    'Saturday':'星期六',
    'Sunday':'星期日',
}
//气候设定
const weather = ref('')
const temperature = ref(0)
//定时器
let timer = ref(null)
//天气图标
const wearherArr ={
    '晴':'icon-qingtian',
    '大雨':'icon-dayu',
    '小雨':'icon-xiaoyu',
    '中雨':'icon-zhongyu',
    '雪':'icon-zhongxue',
    '阴':'icon-yintian',
}
const weatherIcon = computed(()=>{
    return wearherArr[weather.value]
})

onMounted(async()=>{
    const weatherData = await getWeatherHttp(420100);
    //通过API获取天气信息
    temperature.value = weatherData.lives[0].temperature
    weather.value = weatherData.lives[0].weather

    // console.log(temperature.value,weather.value)

    timer.value = setInterval(() => {
        date.value = dayjs().format('YYYY-MM-DD')
        week.value = weekArr[dayjs().format('dddd')]
        time.value = dayjs().format('HH:mm:ss')
    }, 1000)

})

onUnmounted(()=>{
    timer.value&&clearInterval(timer.value)
})

</script>

<style scoped>
#header {
    width: 100%;
    height: 57px;
    position: absolute;
    top: 0;
    left: 0;
    background: url('@/assets/uiResources/header.png');
    background-size: cover;
    display: flex;
    justify-content: center;
}
.title {
    font-family: '等线Bold';
    font-size: 26px;
    font-weight: bold;
    font-stretch: normal;
    letter-spacing: 2px;
    background: rgb(255,255,255);
    background-image: linear-gradient(180deg, rgba(255,255,255,1) 9%, rgba(211,156,50,1) 57%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-top: 3px;
}
.left {
    display: flex;
    width:28%;
    height:36px;
    position: absolute;
    top: 0;
    left: 0;
    align-items: center;
    color: #fff;
    padding-left: 10px;
    font-size:18px
}
.right {
    display: flex;
    width:28%;
    height:36px;
    position: absolute;
    top: 0;
    right: 0;
    align-items: center;
    justify-content: flex-end;
    color: #fff;
    padding-right: 10px;
    font-size:18px
}
span{
    margin-left: 10px;
}
.icon {
    color: #eb9a02;
    font-size: 26px;
    margin-right: 10px;
}
</style>